<!-- 使用VisActor的VTable显示为表格组件 -->
<template>
  <div id="tableContainer" style="width: 600px; height: 400px"></div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, onUnmounted, computed } from 'vue';

  //   import * as VTable from '@visactor/vtable';

  export default defineComponent({
    name: 'VisActorTable',
    components: {},
    setup() {
      onBeforeMount(() => {
        console.log('VisActorTable.vue onBeforeMount');

        const records = [
          {
            '230517143221027': 'CA-2018-156720',
            '230517143221030': 'JM-15580',
            '230517143221032': 'Bagged Rubber Bands',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Fasteners',
            '230517143221037': 'West',
            '230517143221024': 'Loveland',
            '230517143221029': '2018-12-30',
            '230517143221042': '3',
            '230517143221040': '3.024',
            '230517143221041': '-0.605',
          },
          {
            '230517143221027': 'CA-2018-115427',
            '230517143221030': 'EB-13975',
            '230517143221032': 'GBC Binding covers',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Binders',
            '230517143221037': 'West',
            '230517143221024': 'Fairfield',
            '230517143221029': '2018-12-30',
            '230517143221042': '2',
            '230517143221040': '20.72',
            '230517143221041': '6.475',
          },
          {
            '230517143221027': 'CA-2018-115427',
            '230517143221030': 'EB-13975',
            '230517143221032': 'Cardinal Slant-D Ring Binder, Heavy Gauge Vinyl',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Binders',
            '230517143221037': 'West',
            '230517143221024': 'Fairfield',
            '230517143221029': '2018-12-30',
            '230517143221042': '2',
            '230517143221040': '13.904',
            '230517143221041': '4.519',
          },
          {
            '230517143221027': 'CA-2018-143259',
            '230517143221030': 'PO-18865',
            '230517143221032': 'Wilson Jones Legal Size Ring Binders',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Binders',
            '230517143221037': 'East',
            '230517143221024': 'New York City',
            '230517143221029': '2018-12-30',
            '230517143221042': '3',
            '230517143221040': '52.776',
            '230517143221041': '19.791',
          },
          {
            '230517143221027': 'CA-2018-143259',
            '230517143221030': 'PO-18865',
            '230517143221032': 'Gear Head AU3700S Headset',
            '230517143221023': 'Technology',
            '230517143221034': 'Phones',
            '230517143221037': 'East',
            '230517143221024': 'New York City',
            '230517143221029': '2018-12-30',
            '230517143221042': '7',
            '230517143221040': '90.93',
            '230517143221041': '2.728',
          },
          {
            '230517143221027': 'CA-2018-143259',
            '230517143221030': 'PO-18865',
            '230517143221032': 'Bush Westfield Collection Bookcases, Fully Assembled',
            '230517143221023': 'Furniture',
            '230517143221034': 'Bookcases',
            '230517143221037': 'East',
            '230517143221024': 'New York City',
            '230517143221029': '2018-12-30',
            '230517143221042': '4',
            '230517143221040': '323.136',
            '230517143221041': '12.118',
          },
          {
            '230517143221027': 'CA-2018-126221',
            '230517143221030': 'CC-12430',
            '230517143221032': 'Eureka The Boss Plus 12-Amp Hard Box Upright Vacuum, Red',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Appliances',
            '230517143221037': 'Central',
            '230517143221024': 'Columbus',
            '230517143221029': '2018-12-30',
            '230517143221042': '2',
            '230517143221040': '209.3',
            '230517143221041': '56.511',
          },
          {
            '230517143221027': 'US-2018-158526',
            '230517143221030': 'KH-16360',
            '230517143221032': 'Harbour Creations Steel Folding Chair',
            '230517143221023': 'Furniture',
            '230517143221034': 'Chairs',
            '230517143221037': 'South',
            '230517143221024': 'Louisville',
            '230517143221029': '2018-12-29',
            '230517143221042': '3',
            '230517143221040': '258.75',
            '230517143221041': '77.625',
          },
          {
            '230517143221027': 'US-2018-158526',
            '230517143221030': 'KH-16360',
            '230517143221032': 'Global Leather and Oak Executive Chair, Black',
            '230517143221023': 'Furniture',
            '230517143221034': 'Chairs',
            '230517143221037': 'South',
            '230517143221024': 'Louisville',
            '230517143221029': '2018-12-29',
            '230517143221042': '1',
            '230517143221040': '300.98',
            '230517143221041': '87.284',
          },
          {
            '230517143221027': 'US-2018-158526',
            '230517143221030': 'KH-16360',
            '230517143221032': 'Panasonic KP-350BK Electric Pencil Sharpener with Auto Stop',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Art',
            '230517143221037': 'South',
            '230517143221024': 'Louisville',
            '230517143221029': '2018-12-29',
            '230517143221042': '1',
            '230517143221040': '34.58',
            '230517143221041': '10.028',
          },
          {
            '230517143221027': 'US-2018-158526',
            '230517143221030': 'KH-16360',
            '230517143221032': 'GBC ProClick Spines for 32-Hole Punch',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Binders',
            '230517143221037': 'South',
            '230517143221024': 'Louisville',
            '230517143221029': '2018-12-29',
            '230517143221042': '1',
            '230517143221040': '12.53',
            '230517143221041': '5.889',
          },
          {
            '230517143221027': 'US-2018-158526',
            '230517143221030': 'KH-16360',
            '230517143221032': 'DMI Arturo Collection Mission-style Design Wood Chair',
            '230517143221023': 'Furniture',
            '230517143221034': 'Chairs',
            '230517143221037': 'South',
            '230517143221024': 'Louisville',
            '230517143221029': '2018-12-29',
            '230517143221042': '8',
            '230517143221040': '1207.84',
            '230517143221041': '314.038',
          },
          {
            '230517143221027': 'CA-2018-130631',
            '230517143221030': 'BS-11755',
            '230517143221032': 'Hand-Finished Solid Wood Document Frame',
            '230517143221023': 'Furniture',
            '230517143221034': 'Furnishings',
            '230517143221037': 'West',
            '230517143221024': 'Edmonds',
            '230517143221029': '2018-12-29',
            '230517143221042': '2',
            '230517143221040': '68.46',
            '230517143221041': '20.538',
          },
          {
            '230517143221027': 'CA-2018-130631',
            '230517143221030': 'BS-11755',
            '230517143221032': 'Acco Glide Clips',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Fasteners',
            '230517143221037': 'West',
            '230517143221024': 'Edmonds',
            '230517143221029': '2018-12-29',
            '230517143221042': '5',
            '230517143221040': '19.6',
            '230517143221041': '9.604',
          },
          {
            '230517143221027': 'CA-2018-146626',
            '230517143221030': 'BP-11185',
            '230517143221032': 'Nu-Dell Executive Frame',
            '230517143221023': 'Furniture',
            '230517143221034': 'Furnishings',
            '230517143221037': 'West',
            '230517143221024': 'Anaheim',
            '230517143221029': '2018-12-29',
            '230517143221042': '8',
            '230517143221040': '101.12',
            '230517143221041': '37.414',
          },
          {
            '230517143221027': 'CA-2018-158673',
            '230517143221030': 'KB-16600',
            '230517143221032': 'Xerox 1915',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Paper',
            '230517143221037': 'Central',
            '230517143221024': 'Grand Rapids',
            '230517143221029': '2018-12-29',
            '230517143221042': '2',
            '230517143221040': '209.7',
            '230517143221041': '100.656',
          },
          {
            '230517143221027': 'US-2018-102638',
            '230517143221030': 'MC-17845',
            '230517143221032': 'Ideal Clamps',
            '230517143221023': 'Office Supplies',
            '230517143221034': 'Fasteners',
            '230517143221037': 'East',
            '230517143221024': 'New York City',
            '230517143221029': '2018-12-29',
            '230517143221042': '3',
            '230517143221040': '6.03',
            '230517143221041': '2.955',
          },
          {
            '230517143221027': 'CA-2018-118885',
            '230517143221030': 'JG-15160',
            '230517143221032': 'Adtran 1202752G1',
            '230517143221023': 'Technology',
            '230517143221034': 'Phones',
            '230517143221037': 'West',
            '230517143221024': 'Los Angeles',
            '230517143221029': '2018-12-29',
            '230517143221042': '3',
            '230517143221040': '302.376',
            '230517143221041': '22.678',
          },
          {
            '230517143221027': 'CA-2018-118885',
            '230517143221030': 'JG-15160',
            '230517143221032': 'Global High-Back Leather Tilter, Burgundy',
            '230517143221023': 'Furniture',
            '230517143221034': 'Chairs',
            '230517143221037': 'West',
            '230517143221024': 'Los Angeles',
            '230517143221029': '2018-12-29',
            '230517143221042': '4',
            '230517143221040': '393.568',
            '230517143221041': '-44.276',
          },
        ];

        const columns = [
          {
            field: '230517143221027',
            title: 'Order ID',
            width: 'auto',
          },
          {
            field: '230517143221030',
            title: 'Customer ID',
            width: 'auto',
          },
          {
            field: '230517143221032',
            title: 'Product Name',
            width: 'auto',
          },
          {
            field: '230517143221023',
            title: 'Category',
            width: 'auto',
          },
          {
            field: '230517143221034',
            title: 'Sub-Category',
            width: 'auto',
          },
          {
            field: '230517143221037',
            title: 'Region',
            width: 'auto',
          },
          {
            field: '230517143221024',
            title: 'City',
            width: 'auto',
          },
          {
            field: '230517143221029',
            title: 'Order Date',
            width: 'auto',
          },
          {
            field: '230517143221042',
            title: 'Quantity',
            width: 'auto',
          },
          {
            field: '230517143221040',
            title: 'Sales',
            width: 'auto',
          },
          {
            field: '230517143221041',
            title: 'Profit',
            width: 'auto',
          },
        ];

        const option = { records, columns, widthMode: 'standard' };
        // 创建 VTable 实例
        // const tableInstance = new VTable.ListTable(
        //   document.getElementById('tableContainer'),
        //   option,
        // );
      });
      onUnmounted(() => {
        console.log('VisActorTable.vue onUnmounted');
      });

      return {};
    },
  });
</script>
<style scoped lang="less"></style>
